4.1 CSS box model

How are all the HTML elements modeled? Read all in CSS Box Model.

The box model is very important. List the four components in the box model.
Which components are used for the background-color property?
What properties are used to change the dimension of the content area? Width, height

Can you make this table? Padding, and text alignment for all the <th> and <td> cells.

Trial 1: Let's try the above example. Can you give the padding of 20px to all the <td> and <th> elements in the table of id='tr1'?
<???> ???tr1 th { ??? } ???tr1 td { ??? } </style> <table id='tr1' ???='1' style='???:collapse'> <???> <??? ???='2'>Name</th> <th>Age</th> </tr> <tr> <???>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td ???='2'>60</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>test</td> </tr> </table>
Can you change the width and height of any HTML element? Generally block elements only
Trial 2: Let's try to change the width and height of <span> or <a>, and <p>, using the inline style.
<style> .tr2 { background-color:LightGreen; } </style> <span class='tr2' style="width:200px; heigt:???">What a wonderful</span> <a class='tr2' href='???' style=???>cs.tru.ca</a> <p class='tr2' ???=???>Amazing!</p>
Is there no way to change the width of inline-type elements? There is a way. You can change the display type to 'inline-block', and change the width.
Trial 3: Let's try to change the width of <span>.
<span style='background-color:LightGreen'>What a </span> <span style='???:???; width:200px; height:50px; background-color:LightYellow;'>wonderful</span> <span style='background-color:LightBlue'>world!</span>

Learning outcomes
- List and use the four components in the box model.
- Use the display property to change the type.